<template>
  <div class="play-list" ref='playlists' @click.prevent.stop>
    <div class="top">
      <div>当前播放</div>
    </div>
    <div class="table" >
      <div class="title">
        <span style="width:50%;color:rgb(211,211,211);font-size:8px;padding-left:18px">总{{playlistlength}}首</span>
        <span style="width:50%" class="righttitle">
          <span style="flex:2;color:rgb(51,51,51);font-size:13px;text-align:center;cursor:pointer"><i class="iconfont icon-xinjianwenjian" style="padding-right:5px"></i>收藏全部</span>
          <span style="flex:1;text-align:center;font-size:5px;color:rgb(230,230,230)">|</span>
          <span style="flex:2;color:rgb(51,51,51);font-size:13px;cursor:pointer" @click="removeList"><i class="iconfont icon-lajitong" style="padding-right:5px"></i>清空</span>
        </span>
      </div>
      <el-table
        :data="playLists"
        style="width: 100%"
        stripe
        :border="false"
        size="mini"
        :row-class-name="tableRowClassName"
        :show-header='false'
        @row-dblclick="jumpMusic">
        <el-table-column
          width="210%">
          <template #default="scope" >
            <span class="play"></span>
            <span class="textcontent">
              <span >{{scope.row.name}}</span>
              <span style="color:rgb(150,150,151)">{{scope.row.alia[0] === undefined ? '': '('+scope.row.alia[0]+')'}}</span>
              <i class="iconfont icon-VIP" :class="{noShow:scope.row.fee !== 1}" style="margin:0 2px;color:red;position:relative;bottom:-4px"></i>
              <i class="iconfont icon-mv" :class="{noShow:scope.row.mv === 0}" style="margin:0 2px;color:red;font-size:15px;cursor:pointer"></i>
            </span>
           </template>
        </el-table-column>
        <el-table-column
          prop="ar[0].name"
          width="100%">
        </el-table-column>
        <el-table-column width="30%">
          <template> <i class="iconfont icon-lianjie" style="font-size:10px;cursor:pointer;color:grey!important" @click="turnDetail"></i></template>
        </el-table-column>
        <el-table-column width="75%">
          <template #default="scope">
            <span class='playtime' style="color:rgb(223,207,223)"> {{scope.row.dt | parsePlayTime}}</span>
           
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {request} from 'network/request'
import {addZero,parsePlayTime} from 'common/filter.js'
export default {
  data(){
    return {
      playLists:[]
    }
  },
  computed:{
    playList(){
      return this.$store.state.playlist
    },
    playlistlength(){
      return this.playList.length
    },
    getCurrentMusic(){
      return this.$store.state.currentMusicIndex
    },
    MusicDetail(){
      return this.$store.getters.getCurrentMusicDetail
    },
  },
  methods:{
    addZero,
    async getmusic(id,dt){
      this.$store.commit('changeCurrentMusicId',id)
      const data = await request('GET','/song/url',{id:id})
      this.$store.commit('changeCurrentDuration',dt/1000)
      if(data.data[0].url === null){
        alert('当前音乐不能播放,请登录或刷新页面')
        this.$store.commit('changeCurrentMusicIndex',0)
        return
      }
      else{
        this.$store.commit('changeCurrentMusic',data.data[0].url)
        if(data.data[0].freeTrialInfo !== null){
          alert('当前播放为试听片段')
        }
      }
      let musicDe = this.MusicDetail
      musicDe.recentPlayTime = new Date()
      setTimeout(() => {
        this.$store.commit('addRecentPlay',musicDe)
      }, 200);
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === this.getCurrentMusic) {
        return 'current-music music';
      } 
      return 'music';
    },
    removeList(){
      this.$store.commit('removePlayList')
      localStorage.removeItem('playlist');
    },
    jumpMusic(row){
      this.getmusic(row.id,row.dt)
      this.$store.commit('changeCurrentMusicIndex',this.playLists.indexOf(row))
    },
    turnDetail(){
      let id = localStorage.getItem('currentPlayListId')
      this.$router.push('/playlistdetail/'+id+'/'+0)
      this.$parent.$refs.appBottom.$refs.lyric.turn()
    }
  },
  mounted(){
    let playlist = JSON.parse(localStorage.getItem('playlist'))
    if( playlist && playlist !== []){
      this.$store.state.playlist = playlist
    }
    
    if(localStorage.getItem('currentIndex')){
      this.$store.state.currentMusicIndex = JSON.parse(localStorage.getItem('currentIndex'))
    }
  },
  watch:{
    playList(){
      this.playLists = this.playList
        this.getmusic(this.playLists[this.getCurrentMusic].id,this.playLists[this.getCurrentMusic].dt)
      localStorage.setItem('playlist', JSON.stringify(this.playList));
    },
    getCurrentMusic(){
      this.getmusic(this.playLists[this.getCurrentMusic].id,this.playLists[this.getCurrentMusic].dt)
    }
  },
  filters:{
    parsePlayTime
  }
}
</script>
<style scoped>
.play-list{
  height:calc(100vh - 131px);
  background-color:#fff;
  position: absolute;
  top: 58px;
  right: 0;
  z-index: 1001;
  overflow: scroll;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, .1);
  width: 0;
}
.play-list::-webkit-scrollbar{
  display: none;
}
.top{
  width: 100%;
  height: 75px;
  /* margin-top: 58px; */
  display: flex;
  align-items: center;
}
.top div{
  font-size: 19px;
  font-weight: 800;
  padding-left: 15px;
}
/* .topbutton{
  width: 49%;
  height: 28.5px;
  border-radius: 30px;
  border: .5px solid rgb(179,179,179);
  display: flex;
  justify-content: center;
}
.topbutton div{
  width: 50%;
  height: 28.5px;
  border-radius: 30px;
  font-size: 12px;
  text-align: center;
  line-height: 28.5px;
}
.button:hover {
  background-color: rgb(245,245,245);
}
.topbutton .active{
  background-color: rgb(187,187,187);
  color: #fff;
} */
.table{
  position: relative;
  overflow: hidden;
}
.title{
  width: 100%;
  height: 30px;
  background-color: #fff;
  z-index: 10;
  display: flex;
}
.righttitle{
  display: flex;
}
.el-table{
  height:calc(100vh - 236px);
  overflow-y: scroll;
}
.el-table::-webkit-scrollbar{
  width: 5px;
  height: 100%;
  border-radius: 10px;
}
.el-table::-webkit-scrollbar-thumb{
  background-color: rgb(212,212,212);
  border-radius: 3px;
}
::v-deep .el-table .current-music{
  color:red ;
}
.current-music .play::before{
  content:'▶';
}
.play{
  font-size: 5px;
  display:inline-block;
  width: 5px;
  position: relative;
  left: -5px;
  margin-right: 5px;
  height: 5px;
}
.music:hover .playtime{
  color: #000 !important;
}
.noShow{
  display: none;
}
.icon-mv::before,.icon-VIP::before{
  font-size: 23px;
}
.icon-mv:hover::before {
  color:rgb(251, 103, 103);
}
.icon-mv{
  position:relative;bottom:-2.5px;
}
</style>